<template>
    <el-card shadow="hover" class="mt-5">
        <template #header>
            <div class="flex justify-between">
                <span class=" text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="(item, index) in options" :key="index" :checked="item.value == current"
                        style="margin-right: 8px" @click="handleChoose(item.value)">
                        {{ item.text }}
                    </el-check-tag>
                </div>
            </div>
        </template>
        <div id="chart" style="width:100%;height: 300px;"></div>
    </el-card>

</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue"
import * as echarts from 'echarts';
import { getStatistics3 } from '~/api/index.js'
const current = ref("week")
const options = [
    {
        text: "近一个月",
        value: "month"
    },
    {
        text: "近一周",
        value: "week"
    },
    {
        text: "近24小时",
        value: "hour"
    },
]

const handleChoose = (type) => {
    current.value = type;
    getData();
}
var myChart = null;
onMounted(() => {
    var chartDom = document.getElementById('chart');
    if (chartDom) {
        myChart = echarts.init(chartDom);
        getData();
    }
})

onBeforeUnmount(() => {
    if (myChart) echarts.dispose(myChart);
})
function getData() {
    let option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        tooltip: {
            show: true
        },
        series: [
            {
                data: [],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };
    myChart.showLoading();
    getStatistics3(current.value)
        .then(res => {
            option.xAxis.data = res.x;
            option.series[0].data = res.y;

            myChart.setOption(option);
        }).finally(() => {
            myChart.hideLoading();
        })


}
window.addEventListener("resize", () => myChart.resize());
</script>